<template>
	<div>
	  <!-- 面包屑区域 -->
	  <el-breadcrumb separator-class="el-icon-arrow-right">
		<el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		<el-breadcrumb-item>我的商品</el-breadcrumb-item>
	  </el-breadcrumb>
	  <!-- 卡片视图 -->
	  <el-card>
		<el-row :gutter="20">
		  <el-col :span="8">
			<el-input placeholder="请输入商品名称" v-model="searchQuery" clearable="true">
			  <el-button slot="append" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
			</el-input>
		  </el-col>
		  <el-button @click="onProductClick()">显示商品列表</el-button>
		</el-row>
	  </el-card>
	  <!-- 表格 -->
	  <el-table
		:data="tableData"
		style="width: 100%"
		max-height="550">
		<el-table-column
		  prop="productName"
		  label="商品名称"
		  width="180"
		  align="center">
		</el-table-column>
		<el-table-column
		  prop="image"
		  label="图片"
		  align="center">
		  <template slot-scope="scope">
			<el-image
			  style="width: 100px; height: 100px"
			  :src="axios.defaults.baseURL + '/file/' + scope.row.image"
			  :preview-src-list="[axios.defaults.baseURL + '/file/' + scope.row.image]">
			</el-image>
		  </template>
		</el-table-column>
		<el-table-column
		  fixed
		  prop="productID"
		  label="商品编号"
		  width="180"
		  align="center">
		</el-table-column>
		<el-table-column
		  prop="categoryID"
		  label="商品类别"
		  width="180"
		  align="center">
		  <template slot-scope="scope">
		    {{ getCategoryName(scope.row.categoryID) }}
		  </template>
		</el-table-column>
		<el-table-column
		  prop="stock"
		  label="数量"
		  width="180"
		  align="center">
		</el-table-column>
		<el-table-column
		  prop="productDate"
		  label="生产日期"
		  width="250"
		  align="center">
		</el-table-column>
		<el-table-column
		  fixed="right"
		  label="操作"
		  width="150"
		  align="center">
		  <template slot-scope="scope">
			<el-button
    		  @click="deleteRow(scope.row.productID)"
    		  type="danger"
    		  size="small"
    		  icon="el-icon-delete">
    		  移除
    		</el-button>
    		<el-button
    		  @click="editProduct(scope.row)"
    		  type="primary"
    		  size="small"
    		  icon="el-icon-edit">
    		  修改
    		</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 修改对话框 -->
	  <el-dialog title="修改商品" :visible.sync="dialogVisible" width="50%">
		<el-form :model="editForm" label-width="120px">
		  <el-form-item label="商品名称">
			<el-input v-model="editForm.productName"></el-input>
		  </el-form-item>
		  <el-form-item label="图片">
			<el-image
			  style="width: 100px; height: 100px"
			  :src="axios.defaults.baseURL + '/file/' + editForm.image"
			  :preview-src-list="[axios.defaults.baseURL + '/file/' + editForm.image]">
			</el-image>
		  </el-form-item>
		  <el-form-item label="生产日期">
			  <el-date-picker
			    v-model="editForm.productDate"
			    type="date"
			    placeholder="选择日期"
			    format="yyyy-MM-dd"
			    value-format="yyyy-MM-dd">
			  </el-date-picker>
			</el-form-item>
		  <el-form-item label="库存数量">
			<el-input v-model="editForm.stock"></el-input>
		  </el-form-item>
		  <el-form-item label="商品编号">
			<el-input v-model="editForm.productID" disabled></el-input>
		  </el-form-item>
		  <el-form-item label="商品类别">
			<el-select v-model="editForm.categoryID" placeholder="请选择商品类别">
			  <el-option
				v-for="category in categories"
				:key="category.categoryID"
				:label="category.categoryName"
				:value="category.categoryID">
			  </el-option>
			</el-select>
		  </el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
		  <el-button @click="dialogVisible = false">取 消</el-button>
		  <el-button type="primary" @click="updateProduct">确 定</el-button>
		</span>
	  </el-dialog>
	</div>
</template>

<script>
export default {
	created() {
	  this.onProductClick();
	  this.getCategories();
	},
	methods: {
		getCategories() {
		  this.axios.get("/CategoriesList", {})
			.then(response => {
			  this.categories = response.data.data.list;
			})
			.catch(error => {
			  console.error(error);
			});
		},
	  handleSearch() {
		let params = {
		  productName: this.searchQuery
		};
		this.axios.get("ProductsSearchByName", { params: params })
		  .then(
			response => {
			  this.tableData = response.data.data;
			  console.log(this.tableData);
			  if (response.data.code === 200) {
				this.$message({
				  message: response.data.message,
				  type: 'success'
				});
			  } else {
				this.$message({
				  message: response.data.message,
				  type: 'warning'
				});
			  }
			}
		  )
		  .catch(error => {
			console.error(error);
			this.$message({
			  message: error.response.data.message,
			  type: 'error'
			});
		  });
	  },
	  deleteRow(id) {
		  this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.axios.get("ProductsRemove", {
		      params: {
		        productID: id
		      }
		    })
		      .then(
		        response => {
		          this.onProductClick(); // 重新加载数据
		          console.log(response.data);
		          this.$message.success('删除成功');
		        }
		      )
		      .catch(error => {
		        console.error(error);
		      });
		  }).catch(() => {
		    this.$message({
		      type: 'info',
		      message: '已取消删除'
		    });          
		  });
		},
		editProduct(row) {
		  this.editForm = { ...row }; // 复制当前行的数据到编辑表单
		  this.dialogVisible = true;
		},
		updateProduct() {
		  this.axios.post("/ProductsModify", this.editForm)
		    .then(response => {
		      if (response.data.code === 200) {
		        this.$message({
		          message: response.data.message,
		          type: 'success'
		        });
		        this.dialogVisible = false;
		        this.onProductClick(); // 刷新商品列表
		      } else {
		        this.$message({
		          message: response.data.message,
		          type: 'warning'
		        });
		      }
		    })
		    .catch(error => {
		      console.error(error);
		      this.$message({
		        message: error.response.data.message,
		        type: 'error'
		      });
		    });
		},
		onProductClick() {
		this.axios.post('/ProductsList', {})
		  .then(response => {
			this.tableData = response.data.data;
		  })
		  .catch(error => {
			console.error(error);
		  });
	  },
	  getCategoryName(categoryID) {
		const category = this.categories.find(category => category.categoryID === categoryID);
		return category ? category.categoryName : '';
	  }
	},
	data() {
	  return {
		searchQuery: '',
		tableData: [],
		categories: [],
		dialogVisible: false,
		editForm: {
      		productID: '',
      		productName: '',
      		image: '',
      		productDate: '',
      		stock: '',
      		categoryID: ''
    	}
	  };
	}
};
</script>

<style lang="less" scoped>
</style>